<template>
  <div class="video-device-collect">
    <h2>采集参数:</h2>
    <Form :model="formData" inline :label-width="100" :rules="formRules" ref="collectparamsRef">
      <Row>
        <Col :span="4">
        <FormItem label="测温点位1:">
          <i-switch v-model="p1" size="small" @on-change="change(temperaturePoint.p1)" /><br>
          <customInputNumber ref="p1xRef" v-if="p1" v-model="temperaturePoint.p1.x" @changeValue="changeValue" itemKey="temperaturePoint.p1.x">
            <span slot="prepend" class="custom-prepend">x: </span>
          </customInputNumber>
          <customInputNumber ref="p1yRef" v-if="p1" v-model="temperaturePoint.p1.y" @changeValue="changeValue" itemKey="temperaturePoint.p1.y">
            <span slot="prepend" class="custom-prepend">y:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温点位2:">
          <i-switch v-model="p2" size="small" @on-change="change(temperaturePoint.p2)" /><br>
          <customInputNumber ref="p2xRef" v-if="p2" v-model="temperaturePoint.p2.x" @changeValue="changeValue" itemKey="temperaturePoint.p2.x">
            <span slot="prepend" class="custom-prepend">x:</span>
          </customInputNumber>
          <customInputNumber ref="p2yRef" v-if="p2" v-model="temperaturePoint.p2.y" @changeValue="changeValue" itemKey="temperaturePoint.p2.y">
            <span slot="prepend" class="custom-prepend">y:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温点位3:">
          <i-switch v-model="p3" size="small" @on-change="change(temperaturePoint.p3)" /><br>
          <customInputNumber ref="p3xRef" v-if="p3" @changeValue="changeValue" v-model="temperaturePoint.p3.x" itemKey="temperaturePoint.p3.x">
            <span slot="prepend" class="custom-prepend">x:</span>
          </customInputNumber>
          <customInputNumber ref="p3yRef" v-if="p3" @changeValue="changeValue" v-model="temperaturePoint.p3.y" itemKey="temperaturePoint.p3.y">
            <span slot="prepend" class="custom-prepend">y:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温点位4:">
          <i-switch v-model="p4" size="small" @on-change="change(temperaturePoint.p4)" />
          <customInputNumber ref="p4xRef" v-if="p4" v-model="temperaturePoint.p4.x" @changeValue="changeValue" itemKey="temperaturePoint.p4.x">
            <span slot="prepend" class="custom-prepend">x:</span>
          </customInputNumber>
          <customInputNumber ref="p4yRef" v-if="p4" v-model="temperaturePoint.p4.y" @changeValue="changeValue" itemKey="temperaturePoint.p4.y">
            <span slot="prepend" class="custom-prepend">y:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温点位5:">
          <i-switch v-model="p5" size="small" @on-change="change(temperaturePoint.p5)" />
          <customInputNumber ref="p5xRef" v-if="p5" v-model="temperaturePoint.p5.x" @changeValue="changeValue" itemKey="temperaturePoint.p5.x">
            <span slot="prepend" class="custom-prepend">x:</span>
          </customInputNumber>
          <customInputNumber ref="p5yRef" v-if="p5" v-model="temperaturePoint.p5.y" @changeValue="changeValue" itemKey="temperaturePoint.p5.y" size="small">
            <span slot="prepend" class="custom-prepend">y:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温点位6:">
          <i-switch v-model="p6" size="small" @on-change="change(temperaturePoint.p6)" />
          <customInputNumber ref="p6xRef" v-if="p6" v-model="temperaturePoint.p6.x" @changeValue="changeValue" itemKey="temperaturePoint.p6.x">
            <span slot="prepend" class="custom-prepend">x:</span>
          </customInputNumber>
          <customInputNumber ref="p6yRef" v-if="p6" @changeValue="changeValue" itemKey="temperaturePoint.p6.y" v-model="temperaturePoint.p6.y">
            <span slot="prepend" class="custom-prepend">y:</span>
          </customInputNumber>
        </FormItem>
        </Col>
      </Row>
      <!-- 测温区域 -->
      <Row>
        <Col :span="4">
        <FormItem label="测温区域1:">
          <i-switch v-model="a1" size="small" @on-change="changeFounrPoint(positionPoint.a1)" /><br>
          <customInputNumber ref="a1x1Ref" v-if="a1" v-model="positionPoint.a1.x1" @changeValue="changeValue" itemKey="positionPoint.a1.x1">
            <span slot="prepend" class="custom-prepend">x1:</span>
          </customInputNumber>
          <customInputNumber ref="a1y1Ref" v-if="a1" v-model="positionPoint.a1.y1" size="small" @changeValue="changeValue" itemKey="positionPoint.a1.y1">
            <span slot="prepend" class="custom-prepend">y1:</span>
          </customInputNumber>
          <customInputNumber ref="a1x2Ref" v-if="a1" v-model="positionPoint.a1.x2" size="small" @changeValue="changeValue" itemKey="positionPoint.a1.x2">
            <span slot="prepend" class="custom-prepend">x2:</span>
          </customInputNumber>
          <customInputNumber ref="a1y2Ref" v-if="a1" @changeValue="changeValue" itemKey="positionPoint.a1.y2" v-model="positionPoint.a1.y2">
            <span slot="prepend" class="custom-prepend">y2:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温区域2:">
          <i-switch v-model="a2" size="small" @on-change="changeFounrPoint(positionPoint.a2)" /><br>
          <customInputNumber ref="a2x1Ref" v-if="a2" v-model="positionPoint.a2.x1" @changeValue="changeValue" itemKey="positionPoint.a2.x1">
            <span slot="prepend" class="custom-prepend">x1:</span>
          </customInputNumber>
          <customInputNumber ref="a2y1Ref" v-if="a2" v-model="positionPoint.a2.y1" @changeValue="changeValue" itemKey="positionPoint.a2.y1">
            <span slot="prepend" class="custom-prepend">y1:</span>
          </customInputNumber>
          <customInputNumber ref="a2x2Ref" v-if="a2" v-model="positionPoint.a2.x2" @changeValue="changeValue" itemKey="positionPoint.a2.x2">
            <span slot="prepend" class="custom-prepend">x2:</span>
          </customInputNumber>
          <customInputNumber ref="a2y2Ref" v-if="a2" v-model="positionPoint.a2.y2" @changeValue="changeValue" itemKey="positionPoint.a2.y2">
            <span slot="prepend" class="custom-prepend">y2:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温区域3:">
          <i-switch v-model="a3" size="small" @on-change="changeFounrPoint(positionPoint.a3)" /><br>
          <customInputNumber ref="a3x1Ref" v-if="a3" v-model="positionPoint.a3.x1" @changeValue="changeValue" itemKey="positionPoint.a3.x1">
            <span slot="prepend" class="custom-prepend">x1:</span>
          </customInputNumber>
          <customInputNumber ref="a3y1Ref" v-if="a3" v-model="positionPoint.a3.y1" @changeValue="changeValue" itemKey="positionPoint.a3.y1">
            <span slot="prepend" class="custom-prepend">y1:</span>
          </customInputNumber>
          <customInputNumber ref="a3x2Ref" v-if="a3" v-model="positionPoint.a3.x2" size="small" @changeValue="changeValue" itemKey="positionPoint.a3.x2">
            <span slot="prepend" class="custom-prepend">x2:</span>
          </customInputNumber>
          <customInputNumber ref="a3y2Ref" v-if="a3" v-model="positionPoint.a3.y2" @changeValue="changeValue" itemKey="positionPoint.a3.y2">
            <span slot="prepend" class="custom-prepend">y2:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温区域4:">
          <i-switch v-model="a4" size="small" @on-change="changeFounrPoint(positionPoint.a4)" /><br>
          <customInputNumber ref="a4a1Ref" v-if="a4" v-model="positionPoint.a4.x1" @changeValue="changeValue" itemKey="positionPoint.a4.x1">
            <span slot="prepend" class="custom-prepend">x1:</span>
          </customInputNumber>
          <customInputNumber ref="a4y1Ref" v-if="a4" v-model="positionPoint.a4.y1" @changeValue="changeValue" itemKey="positionPoint.a4.y1">
            <span slot="prepend" class="custom-prepend">y1:</span>
          </customInputNumber>
          <customInputNumber ref="a4x2Ref" v-if="a4" v-model="positionPoint.a4.x2" @changeValue="changeValue" itemKey="positionPoint.a4.x2">
            <span slot="prepend" class="custom-prepend">x2:</span>
          </customInputNumber>
          <customInputNumber ref="a4y2Ref" v-if="a4" v-model="positionPoint.a4.y2" @changeValue="changeValue" itemKey="positionPoint.a4.y2">
            <span slot="prepend" class="custom-prepend">y2:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温区域5:">
          <i-switch v-model="a5" size="small" @on-change="changeFounrPoint(positionPoint.a5)" /><br>
          <customInputNumber ref="a5x1Ref" v-if="a5" v-model="positionPoint.a5.x1" @changeValue="changeValue" itemKey="positionPoint.a5.x1">
            <span slot="prepend" class="custom-prepend">x1:</span>
          </customInputNumber>
          <customInputNumber ref="a5y1Ref" v-if="a5" v-model="positionPoint.a5.y1" @changeValue="changeValue" itemKey="positionPoint.a5.y1">
            <span slot="prepend" class="custom-prepend">y1:</span>
          </customInputNumber>
          <customInputNumber ref="a5x2Ref" v-if="a5" v-model="positionPoint.a5.x2" @changeValue="changeValue" itemKey="positionPoint.a5.x2">
            <span slot="prepend" class="custom-prepend">x2:</span>
          </customInputNumber>
          <customInputNumber ref="a5y2Ref" v-if="a5" v-model="positionPoint.a5.y2" @changeValue="changeValue" itemKey="positionPoint.a5.y2">
            <span slot="prepend" class="custom-prepend">y2:</span>
          </customInputNumber>
        </FormItem>
        </Col>
        <Col :span="4">
        <FormItem label="测温区域6:">
          <i-switch size="small" v-model="a6" @on-change="changeFounrPoint(positionPoint.a6)" />
          <customInputNumber ref="a6x1Ref" v-if="a6" v-model="positionPoint.a6.x1" @changeValue="changeValue" itemKey="positionPoint.a6.x1">
            <span slot="prepend" class="custom-prepend">x1:</span>
          </customInputNumber>
          <customInputNumber ref="a6y1Ref" v-if="a6" v-model="positionPoint.a6.y1" @changeValue="changeValue" itemKey="positionPoint.a6.y1">
            <span slot="prepend" class="custom-prepend">y1:</span>
          </customInputNumber>
          <customInputNumber ref="a6x2Ref" v-if="a6" v-model="positionPoint.a6.x2" @changeValue="changeValue" itemKey="positionPoint.a6.x2">
            <span slot="prepend" class="custom-prepend">x2:</span>
          </customInputNumber>
          <customInputNumber ref="a6y2Ref" v-if="a6" type="number" v-model="positionPoint.a6.y2" @changeValue="changeValue" itemKey="positionPoint.a6.y2">
            <span slot="prepend" class="custom-prepend">y2:</span>
          </customInputNumber>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="4">
        <FormItem label="测温线:">
          <i-switch size="small" v-model="line" @on-change="changeFounrPoint(positionPoint.line)" />
          <customInputNumber ref="linex1Ref" v-if="line" v-model="positionPoint.line.x1" @changeValue="changeValue" itemKey="positionPoint.line.x1">
            <span slot="prepend" class="custom-prepend">x1:</span>
          </customInputNumber>
          <customInputNumber ref="liney1Ref" v-if="line" v-model="positionPoint.line.y1" @changeValue="changeValue" itemKey="positionPoint.line.y1">
            <span slot="prepend" class="custom-prepend">y1:</span>
          </customInputNumber>
          <customInputNumber ref="linex2Ref" v-if="line" v-model="positionPoint.line.x2" @changeValue="changeValue" itemKey="positionPoint.line.x2">
            <span slot="prepend" class="custom-prepend">x2:</span>
          </customInputNumber>
          <customInputNumber ref="liney2Ref" v-if="line" v-model="positionPoint.line.y2" @changeValue="changeValue" itemKey="positionPoint.line.y2">
            <span slot="prepend" class="custom-prepend">y2:</span>
          </customInputNumber>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
        <FormItem label="采集频率:" prop="collectRate">
          <InputNumber v-model="formData.collectRate" size="small" style="width:200px;"></InputNumber><span>分钟</span>
        </FormItem>
        </Col>
      </Row>
    </Form>
    <!-- 测温区域 -->
    <Row style="text-align:center;margin-top: 10px;">
      <Button @click="handelSubmit" type="info" :loading="btnSaveDisable">
        <span v-if="!btnSaveDisable">保存</span>
        <span v-else>保存中</span>
      </Button>
    </Row>
  </div>
</template>
<script>
import { postVideoParams, getVideoParams } from '@/api'
import {
  temperaturePoint,
  positionPoint,
  hasFalseInArray,
  whichIsTrue,
  isValidate
} from './material'

import { validateDeviceId1 } from '@/utils/rules'

import customInputNumber from '@/components/customInputNumber'

const isFalse = value => {
  if (value !== 0 && (!value || value == 'null' || value == 'undefined')) {
    return true
  } else {
    return false
  }
}

/**
 * @return 返回a开头的键值对组成的新map
 */
const getAstart = item => {
  let newObject = {}
  for (let key in item) {
    if (key.startsWith('a')) {
      newObject[key] = item[key]
    }
  }
  return newObject
}

/**
 * @return 返回p开头键值对组成新的map
 */
const getPstart = item => {
  let newObject = {}
  for (let key in item) {
    if (key.startsWith('p')) {
      newObject[key] = item[key]
    }
  }
  return newObject
}

/**
 * @param 传入"12,57;34,70"字符串
 * @return 返回x1,y1,x2,y2为键的map
 */
const checkIsFourKeys = str => {
  let newObj = {}
  let splitTwo = str.split(';')
  if (!!str) {
    newObj['x1'] = splitTwo[0].split(',')[0]
    newObj['y1'] = splitTwo[0].split(',')[1]
    newObj['x2'] = splitTwo[1].split(',')[0]
    newObj['y2'] = splitTwo[1].split(',')[1]
  } else {
    newObj['x1'] = null
    newObj['y1'] = null
    newObj['x2'] = null
    newObj['y2'] = null
  }
  return newObj
}

// 拼接a开头的对象
const getAstartPoint = item => {
  let newObject = {}
  for (let key in item) {
    if (key.startsWith('a')) {
      newObject[key] = checkIsFourKeys(item[key])
    }
  }
  return newObject
}

/**
 * @param 传入"12,57"字符串
 * @return 返回x,y为键的map
 */
const checkIsTwoKeys = str => {
  let newObj = {}
  if (!!str) {
    let splitOne = str.split(',')
    newObj['x'] = splitOne[0]
    newObj['y'] = splitOne[1]
  } else {
    newObj['x'] = null
    newObj['y'] = null
  }
  return newObj
}

// const checkIsTwoFalse = str => {
//   let newObj = {}
// }

// 拼接p开头的对象
const getPstartPoint = item => {
  let newObject = {}
  for (let key in item) {
    if (key.startsWith('p')) {
      newObject[key] = checkIsTwoKeys(item[key])
    }
  }
  return newObject
}

// 判断哪些点是存在值得
const whichPointIsExist = (vm, item) => {
  let startsWithAObject = getAstart(item)
  let startsWithPObject = getPstart(item)
  for (let ka in startsWithAObject) {
    if (!!startsWithAObject[ka]) {
      vm[ka] = true
    } else {
      vm[ka] = false
    }
  }
  for (let kp in startsWithPObject) {
    if (!!startsWithPObject[kp]) {
      vm[kp] = true
    } else {
      vm[kp] = false
    }
  }
}

const temperaturePointLinkPoint = (vm, str) => {
  let newObj = {}
  let splitTwo = str.split(';')
  if (!!str) {
    vm['line'] = true
    newObj['x1'] = splitTwo[0].split(',')[0]
    newObj['y1'] = splitTwo[0].split(',')[1]
    newObj['x2'] = splitTwo[1].split(',')[0]
    newObj['y2'] = splitTwo[1].split(',')[1]
  } else {
    newObj['x1'] = null
    newObj['y1'] = null
    newObj['x2'] = null
    newObj['y2'] = null
    vm['line'] = false
  }
  return newObj
}

export default {
  props: ['id'],
  watch: {
    id() {
      this.getInitintalState()
    }
  },
  mounted() {
    this.getInitintalState()
  },

  components: {
    customInputNumber
  },

  data() {
    return {
      formData: {
        collectRate: 15
      },
      formRules: {
        collectRate: {
          required: true,
          validator: validateDeviceId1('采集频率', '采集频率只能输入正整数')
        }
      },
      baseInfo: {},
      serverParamsSaveId: '',
      btnSaveDisable: false,
      p1: false,
      p2: false,
      p3: false,
      p4: false,
      p5: false,
      p6: false,
      a1: false,
      a2: false,
      a3: false,
      a4: false,
      a5: false,
      a6: false,
      line: false,
      temperaturePoint: JSON.parse(JSON.stringify(temperaturePoint)),
      positionPoint: JSON.parse(JSON.stringify(positionPoint))
    }
  },
  methods: {
    change(value) {
      value.x = null
      value.y = null
    },
    changeFounrPoint(value) {
      value.x1 = null
      value.y1 = null
      value.x2 = null
      value.y2 = null
    },
    changeValue(firstKey, secondKey, thirdKey, value) {
      const vm = this
      vm[firstKey][secondKey][thirdKey] = value
    },

    getInitintalState() {
      const self = this
      let id = self.id,
        params = {
          id
        }
      getVideoParams(params).then(res => {
        if (res.code == 200) {
          const { info } = res.data

          self.baseInfo = info
          if (!info) return false

          // 测温线点
          const temperatureLine = temperaturePointLinkPoint(self, info.line)

          // 先判断哪些坐标点存在
          whichPointIsExist(self, info)

          // 再填充值,填充a开头的。
          self.positionPoint = Object.assign(
            self.positionPoint,
            getAstartPoint(info)
          )

          // 填充p开头的
          self.temperaturePoint = JSON.parse(
            JSON.stringify(getPstartPoint(info))
          )

          // 采集频率
          self.formData.collectRate = info.collectRate
        }
      })
    },

    handelSubmit() {
      const vm = this
      const newArr = whichIsTrue(vm)
      isValidate(newArr, vm).then((res, reg) => {
        if (hasFalseInArray(res)) {
          vm.$refs.collectparamsRef.validate(valid => {
            if (valid) {
              let thermalImagerId = this.id
              this.btnSaveDisable = true
              const objectTemperature = JSON.parse(
                JSON.stringify(this.temperaturePoint)
              )
              const objectPosition = JSON.parse(
                JSON.stringify(this.positionPoint)
              )
              // console.log(objectTemperature);
              // return false;

              let id = this.serverParamsSaveId ? this.serverParamsSaveId : null
              let newObj = {}
              for (let k in objectTemperature) {
                if (
                  isFalse(objectTemperature[k]['x']) ||
                  isFalse(objectTemperature[k]['y'])
                ) {
                  newObj[k] = null
                } else {
                  newObj[k] =
                    objectTemperature[k]['x'] + ',' + objectTemperature[k]['y']
                }
              }
              for (let k in objectPosition) {
                if (
                  isFalse(objectPosition[k]['x1']) ||
                  isFalse(objectPosition[k]['y1']) ||
                  isFalse(objectPosition[k]['x2']) ||
                  isFalse(objectPosition[k]['y2'])
                ) {
                  newObj[k] = null
                } else {
                  newObj[k] =
                    objectPosition[k]['x1'] +
                    ',' +
                    objectPosition[k]['y1'] +
                    ';' +
                    objectPosition[k]['x2'] +
                    ',' +
                    objectPosition[k]['y2']
                }
              }
              let params = Object.assign(newObj, this.formData, {
                thermalImagerId,
                id
              })
              postVideoParams(params).then(res => {
                if (res.code == 200) {
                  this.serverParamsSaveId = res.data
                  this.$Message.success('修改成功')
                  setTimeout(_ => {
                    this.btnSaveDisable = false
                    this.getInitintalState()
                  }, 500)
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>
